<template>
    <!-- <el-upload
      :on-success="handleAlbumSuccess"
      accept="image/*"
      :show-file-list="false"
      action="http://10.229.7.20:8888/api/user/user/uploadAvatar"
      class="avatar-uploader"
      :limit="1"
    >
      <template #trigger>
        <el-button type="primary">上传头像</el-button>
      </template>
      <template #tip>
        <div class="el-upload__tip text-red">
          limit 1 file, new file will cover the old file
        </div>
      </template>
    </el-upload> -->
    <div>
      <input type="file" @change="change()" ref="file">
    </div>
  </template>
  
<script>
import api from '../../api/data.js'
import axios from 'axios'
import { ElMessage } from 'element-plus'
// import {Clock, View, Delete, Edit} from '@element-plus/icons-vue'
export default {
  name: 'AvatarUploader',
  components: {
  },
  props: {
    image: {
      type: Object,
      default: () => ({
        url: '',
      })
    }
  },
  data () {
    return {
      baseUrl: api.baseUrl,
      // fileList: []
    }
  },
  methods: {
    change () {
      let file = this.$refs.file.files[0]
      let index = file.name.lastIndexOf('.')
      let fileText = file.name.substring(index,file.name.length)
      let fileName = fileText.toLowerCase() //文件类型
      if(fileName !== '.png' && fileName !== '.jpg'){
          alert('系统仅支持 JPG或PNG 格式的图片，请您调整格式后重新上传')
          return                
      }
      let isLt2M = file.size/1024/1024 < 5
      if(!isLt2M){
          alert('图片大小不能超过5M,请重新上传')
          return      
      }

      let formData = new FormData()
      formData.append('avatar', file);
      formData.append('token', this.$store.state.token);

      let config = {
        method: 'post',
        url: 'http://10.229.7.20:8888/api/user/user/uploadAvatar',
        headers: { 
            'Content-Type': false, 
        },
        data : formData
      };

      axios(config).then((res) => {
        if (res.data.code === 342) {
          this.$store.commit('logout')
          this.$store.commit('tokenError')
          this.$router.push({path: '/login'})
        } else if (res.data.code < 300) {
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
          this.$store.commit('setAvatar', res.data.data.url)
          this.$store.commit('pageChanged')
        } else {
          ElMessage.error(res.data.message)
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    }
    // change () {
    //   let inputBox = this.$refs.file
    //   let file = inputBox.files[0]
    //   let index = file.name.lastIndexOf('.')
    //   let fileText = file.name.substring(index,file.name.length)
    //   let fileName = fileText.toLowerCase() //文件类型
    //   if(fileName != '.png' || fileName != '.jpg'){
    //       alert('系统仅支持 JPG或PNG 格式的图片，请您调整格式后重新上传')
    //       return                
    //   }
    //   let isLt2M = file.size/1024/1024 < 5
    //   if(!isLt2M){
    //       alert('图片大小不能超过5M,请重新上传')
    //       return      
    //   }
    //   config.log(file)

    //   let formData = new FormData()
    //   formData.append('avatar', file);
    //   formData.append('token', this.$store.state.token);

    //   let config = {
    //     method: 'post',
    //     url: 'http://10.229.7.20:8888/api/user/user/uploadAvatar',
    //     headers: { 
    //         'Content-Type': false, 
    //     },
    //     data : formData
    //   };

    //   axios(config).then((res) => {
    //     if (res.data.code === 342) {
    //       this.$store.commit('logout')
    //       this.$store.commit('tokenError')
    //       this.$router.push({path: '/login'})
    //     } else if (res.data.code < 300) {
    //       ElMessage({
    //         message: res.data.message,
    //         type: 'success',
    //       })
    //     } else {
    //       ElMessage.error(res.data.message)
    //     }
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //   });

    // }
    // beforeAlbumUpload(file) {
    //   const isJPG = file.type === 'image/jpeg';
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //   this.$message.error('上传图片只能是 JPG 格式!');
    //   }
    //   if (!isLt2M) {
    //   this.$message.error('上传图片大小不能超过 2MB!');
    //   }
    //   return isJPG && isLt2M;
    // },
    // handleAlbumSuccess(res, file) {
    //   console.log(res);
    //   console.log(file);
    //   // this.imageUrl = 'http://www.another.ren/audios/' + res;
    // }
    // uploadFile (file) {

      // api.uploadAvatar((res) => {
      //   if (res.data.code === 342) {
      //     this.$store.commit('logout')
      //     this.$store.commit('tokenError')
      //     this.$router.push({path: '/login'})
      //   } else if (res.data.code < 300) {
      //     ElMessage({
      //       message: res.data.message,
      //       type: 'success',
      //     })
      //   } else {
      //     ElMessage.error(res.data.message)
      //   }
      // })

      // let axios = require('axios');
      // let FormData = require('form-data');
      // let data = new FormData();
      // let fs = require('fs');
      // data.append('avatar', fs.createReadStream(''));
      // data.append('token', this.$store.state.token);

      // let config = {
      //   method: 'post',
      //   url: 'http://10.229.7.20:8888/api/user/user/uploadAvatar',
      //   headers: { 
      //       'Content-Type': false, 
      //   },
      //   data : data
      // };

      // axios(config).then((res) => {
      //   if (res.data.code === 342) {
      //     this.$store.commit('logout')
      //     this.$store.commit('tokenError')
      //     this.$router.push({path: '/login'})
      //   } else if (res.data.code < 300) {
      //     ElMessage({
      //       message: res.data.message,
      //       type: 'success',
      //     })
      //   } else {
      //     ElMessage.error(res.data.message)
      //   }
      // })
      // .catch(function (error) {
      //   console.log(error);
      // });
      
    // },
    // handleChange (file, fileList) {
    //   fileList = fileList.slice(0, 1);
    //   console.log("file---", file);
    //   console.log("fileList---", fileList);
    //   this.uploadFile(file)
    // }
  },
  computed: {
    // imgFile () {
    //   // console.log( this.file )
    //   // console.log( this.$refs.file )
    //   return this.file
    // }
  },
  mounted () {

  },
  watch: {
    // imgFile (val) {
    //   console.log(val)
    // }
  }
}
</script>